import {Component} from 'react';
import {connect} from 'react-redux';
import axios from 'axios';
import * as Notification from 'modules/notification/actions';
import Session from 'modules/auth/session';
import styled from "styled-components";
import {Button, PageHeader, Select} from 'antd';

const {Option} = Select;
const Outer = styled.div`
  border:1px solid #ececec;
  margin:20px;
   box-shadow: 3px 3px 6px rgba(0,0,0,0.1), 3px 3px 6px rgba(0,0,0,0.2);
`;


const Conten = styled.div`
  margin: 0 0 20px;
  box-sizing:border-box;
`;
const ContenTiTle = styled.div`
padding:1px;
 background:#f1f1f1;
`;
const ContenList = styled.div`
  display:flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
`;
const CenterName = styled.div`
  width:180px;
  font-size:14px;
  color:#000;
  text-align:right;
  padding-right:15px;
`;
const CenterInputOuter = styled.div`
  width:400px;
  font-size:14px;
  color:#000;
`;
const CenterBtn = styled.div`
  text-align:center;
  padding:20px
`;

const tips = 'Amf日志等级，根据实际提供的填写，目前提供Debug,Informational,Warning,Error,Critical。'

class Collection extends Component {
    state = {
        search: '',
        document: {
            action: '',
            visible: false,
            dimmed: false
        },
        confirm: {
            visible: false,
            imsi: ''
        },
        view: {
            visible: false,
            disableOnClickOutside: false,
            imsi: ''
        },
        configData: {},
        level: ''
    };

    componentWillMount() {

        const {dispatch} = this.props
        let $this = this
        const sessionData = new Session();
        const csrf = ((sessionData || {}).session || {}).csrfToken;
        const authToken = ((sessionData || {}).session || {}).authToken;
        let headers = {'X-CSRF-TOKEN': csrf}
        if (authToken) {
            headers['Authorization'] = "Bearer " + authToken
        }

        axios({
            baseURL: '/api/db',
            headers: headers,
            method: "get",
            url: '/amf',
            params: {},
            // data
        }).then(res => {
            var configData = res.data[0].config
            $this.setState({
                    configData: res.data[0],
                    level: configData.Level
                }
            )
        })
    }

    getSData() {
        const {dispatch} = this.props
        let $this = this
        const sessionData = new Session();
        const csrf = ((sessionData || {}).session || {}).csrfToken;
        const authToken = ((sessionData || {}).session || {}).authToken;
        let headers = {'X-CSRF-TOKEN': csrf}
        if (authToken) {
            headers['Authorization'] = "Bearer " + authToken
        }

        axios({
            baseURL: '/api/db',
            headers: headers,
            method: "get",
            url: '/amf',
            params: {},
            // data
        }).then(res => {
            var configData = res.data[0].config
            $this.setState({
                    configData: res.data[0],
                    level: configData.Level
                }
            )

            dispatch(Notification.success({
                title: '提示',
                message: `AMF日志等级刷新成功！`
            }));
        })
    }

    saveFormData() {
        const {dispatch} = this.props

        var sendData = JSON.parse(JSON.stringify(this.state.configData))
        sendData.config.Level = this.state.level

        if (sendData.config.Level == '') {
            dispatch(Notification.error({
                title: '提示', autoDismiss: 4,
                message: `Level的值不能为空！`
            }));
            return false
        }


        let $this = this
        const sessionData = new Session();
        const csrf = ((sessionData || {}).session || {}).csrfToken;
        const authToken = ((sessionData || {}).session || {}).authToken;
        let headers = {'X-CSRF-TOKEN': csrf}
        if (authToken) {
            headers['Authorization'] = "Bearer " + authToken
        }

        axios({
            baseURL: '/api/db',
            headers: headers,
            method: "PATCH",
            url: '/amf/' + sendData._id,
            data: sendData,
            //
        }).then(res => {
            // var configData = res.data[0].config
            // $this.setState({
            //         configData,
            //         AmfName: configData.AmfName,
            //         AmfRegionId: configData.AmfRegionId,
            //         AmfSetId: configData.AmfSetId,
            //         AmfPointer: configData.AmfPointer,
            //     }
            // )

            dispatch(Notification.success({
                title: '提示',
                message: `AMF日志等级配置保存成功！`
            }));
        })
    }

    _handleChange(value) {
        // 获取 input 元素上的value
        this.setState({
            level: value
        })
    }

    render() {
        let $this = this

        return (
            <div>
                <PageHeader
                    style={{
                        border: '1px solid rgb(235, 237, 240)',
                    }}
                    title="AMF日志等级"
                />
                <Outer>

                    <Conten>
                        <ContenTiTle>
                            <ContenList>
                                <CenterName><strong>参数名</strong></CenterName>
                                <CenterInputOuter>
                                    <strong>值</strong>
                                </CenterInputOuter>
                            </ContenList>
                        </ContenTiTle>
                        <ContenList>
                            <CenterName>Level</CenterName>
                            <CenterInputOuter title={tips}>
                                <Select
                                    value={this.state.level}
                                    style={{width: 400}}
                                    onChange={(e) => this._handleChange(e)}
                                    placeholder={tips}

                                >
                                    <Option value="Debug">Debug</Option>
                                    <Option value="Informational">Informational</Option>
                                    <Option value="Warning">Warning</Option>
                                    <Option value="Error">Error</Option>
                                    <Option value="Critical">Critical</Option>
                                </Select>
                            </CenterInputOuter>
                        </ContenList>

                    </Conten>
                </Outer>
                <CenterBtn>
                    <Button type="success" onClick={() => this.saveFormData()}>保存</Button>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <Button type="primary" onClick={() => this.getSData()}>刷新</Button>
                </CenterBtn>


            </div>
        )
    }
}

Collection = connect(
    (state) => ({})
)(Collection);

export default Collection;